<template>
    <transition name="slide-right">
      <div class="ChildPage_PropPanel" v-if="showChildPanel">
        <div class="ChildPage_PropPanel_mask" v-on:click="showChildPanel=false"></div>
        <div class="ChildPage_PropPanel_center">
          <div class="ChildPage_PropPanel_title">
            <div class="ChildPage_PropPanel_title_h1">字典详情</div>
            <div class="ChildPage_PropPanel_title_close el-icon-close" v-on:click="showChildPanel=false"></div>
          </div>
          <div class="ChildPage_PropPanel_List">
            <vb-table :option="option" ref="table"
                       @row-del="rowDel"
                       @row-save="rowSave"
                       @row-update="rowUpdate"
                       @on-load="getList"
                       @row-detail="beforeOpenEdit">
            </vb-table>
          </div>
        </div>
      </div>
    </transition>
</template>

<script>
  export default {
    mixins: [],
    components: {
    },
    data() {
      return {
        showChildPanel: false,
        oldKey: null,
        option: {
          selection: true,
          index: true,
          column: [
            {
              label: "字典名称",
              prop: 'name',
              form: {
                rules: [
                  {
                    required: true,
                    trigger: "click"
                  }
                ],
              },
            },
            {
              label: "字典编号",
              prop: "key",
              search: {
                show: true,
                label: "关键词",
                prop: "keyword",
                placeholder: "\ue605 名称/编号"
              },
              form: {
                rules: [
                  {
                    required: true,
                    trigger: "click"
                  }
                ],
              },
            },
            {
              label: "上级字典",
              prop: 'parentId',
              tableShow: false,
              type: "tree",
              dicData: [],
              treeProps: {
                checkStrictly: true,
                emitPath: false,
                label: "name",
                value: "id"
              },
              form: {
                disabled: true,
                span: 24
              }
            },
            {
              label: "字典排序",
              prop: "sort",
              type: "inputNumber",
              width: 80,
              align: "center",
              form: {
                default: 1,
                rules: [
                  {
                    required: true,
                    trigger: "click"
                  }
                ],
              },
            },
            {
              label: "有效",
              prop: 'effect',
              type: "switch",
              align: "center",
              width: 80,
              form: {
                default: true
              }
            },
            {
              label: "字典备注",
              prop: 'remark',
              type: "textarea",
              form: {
                span: 24,
              }
            }
          ],
          form: {
            width: 600
          },
          rowKey: "key"
        }
      }
    },
    props: {
      parentDicData: Array
    },
    computed: {},
    async mounted() {
    },
    methods: {

      /**
       * 打开面板
       * @param row
       */
      open (row) {
        this.dicKey = row.key
        this.dicId = row.id
        let find = this.option.column.find(item => {
          return item.prop === 'parentId'
        })
        if (find) {
          find.dicData = this.parentDicData
          find.form.default = this.dicId
        }
        this.showChildPanel = true
      },

      /**
       * 查询数据列表信息
       * @param page
       * @param size
       * @param search 检索条件
       * @param done
       */
      getList (page, size, search, done) {
        let self = this
        this.$api.getChildDictionaryList(Object.assign({
          pageIndex: page,
          pageSize: size,
          dictId: self.dicId
        }, search)).then(res => {
          done(res)
        })
      },

      /**
       * 新增数据处理
       * @param form
       * @param done
       */
      rowSave (form, done) {
        form.dictId = this.dicId
        this.$api.addChildDictionary(form).then((res) => {
          done(res)
        })
      },

      /**
       * 打开编辑框
       * @param row
       * @param done
       */
      beforeOpenEdit(row, done) {
        this.oldKey = row.key;
        done(row)
      },

      /**
       * 更新数据处理
       * @param form
       * @param done
       */
      rowUpdate (form, done) {
        form.oldKey = this.oldKey;
        form.dictId = this.dicId;
        this.$api.updateChildDictionary(form).then((res) => {
          done(res)
        })
      },

      /**
       * 删除数据处理
       * @param ids
       * @param done
       */
      rowDel (ids, done) {
        this.$api.deleteChildDictionary({
          keys: ids,
          dictId: this.dicId
        }).then((res) => {
          done(res)
        })
      },

      /**
       * 添加子项
       */
      addChild() {
        this.showChildPanel = true
      }
    },
    watch: {

    }
  }
</script>

<style lang="scss" scoped>

.slide-right-enter-active {
  -webkit-animation: panel-slide-right-in .3s !important;
  animation: panel-slide-right-in .3s !important
}

.slide-right-enter-active, .slide-right-leave-active {
  transition: all .5s;
  right: 0px;
}

.slide-right-enter, .slide-right-leave-to {
  right: -800px;
  opacity: 0;
}

@-webkit-keyframes panel-slide-right-in {
  0% {
    right: -800px;
    opacity: 0;
  }
  100% {
    right: 0px;
    opacity: 1;
  }
}

@keyframes panel-slide-right-in {
  0% {
    right: -800px;
    opacity: 0;
  }
  100% {
    right: 0px;
    opacity: 1;
  }
}
</style>
